﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
  <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
  <style>
    /* css 代码  */
    #container2 {
      min-width: 300px;
      max-width: 800px;
      height: 380px;
      margin: 1em auto;
      margin-left: 40%;
    }
    #container1 {
      min-width: 300px;
      max-width: 800px;
      height: 380px;
      margin: 1em auto;
    }
  </style>
  <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/modules/variable-pie.js"></script>


  <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
  <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/themes/grid-light.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


  <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    /* css 代码  */
  </style>
  <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
  <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
  <script src="https://cdn.highcharts.com.cn/highcharts/themes/grid-light.js"></script>

<title>送水后台管理系统</title>

<!--Bootstrap固定框架-->
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
<link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
<!--图标库-->
<link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
<!--核心样式-->
<link rel="stylesheet" th:href="@{/css/style.css}">
<link rel="stylesheet" href="css/login.css" />

</head>
<body>

<div id="viewport">


  <!-- Sidebar -->
  <div id="sidebar" th:fragment="sidebar">

    <header>
      <a href="#">后台管理系统</a>
    </header>
    <ul class="nav">
      <li>
        <a th:href="@{/cust/listCust}">
          <i class="zmdi zmdi-view-dashboard"></i> 客户管理
        </a>
      </li>
      <li>
        <a th:href="@{/worker/workerList}">
          <i class="zmdi zmdi-link"></i> 送水工管理
        </a>
      </li>
      <li>
        <a th:href="@{/history/listHis}">
          <i class="zmdi zmdi-view-list"></i> 送水历史管理
        </a>
      </li>
      <li>
        <a th:href="@{/salary/searchCalcSalay}">
          <i class="zmdi zmdi-view-toc"></i> 计算工资
        </a>
      </li>
      <li>
        <a th:href="@{/stat/statWaterDetails}">
          <i class="zmdi zmdi-view-web"></i> 统计送水数量
        </a>
      </li>
      <li>
        <a th:href="@{/pwd}">
          <i class="zmdi zmdi-view-week"></i> 修改密码
        </a>
      </li>
    </ul>
  </div>
  
  <!-- Content -->
  <div id="content">
    <nav class="navbar navbar-default" th:fragment="navbar">
      <div class="container-fluid" >
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
            </a>
          </li>
          <li>
            <a href="#">当前用户:[[${session.currentUser}]]</a></li>
        </ul>
      </div>
    </nav>
    <div class="container-fluid">

    </div>
  </div>

  <!--人物展示-->
  <!--第一名-->
    <div class="body_count">
      <div class="login_count2">
        <img src="/img/1.png" style="width: 60px; height:80px">
        <div style="margin-left: 80px;margin-top: -70px">
          <h1 style="font-size:24px;color: red">冠军</h1>
          <p id="No1" th:name="workerName"></p>
          <p id="NoCount1" th:name="sendWaterCount"></p>
        </div>
      </div>
    </div>
  <!--第二名-->
  <div class="body_count3">
    <div class="login_count3">
      <img src="/img/2.png" style="width: 60px; height:80px">
      <div style="margin-left: 80px;margin-top: -70px">
        <h1 style="font-size:24px;color: blue">亚军</h1>
        <p id="No2" th:name="workerName"></p>
        <p id="NoCount2" th:name="sendWaterCount"></p>
      </div>
    </div>
  </div>
  <!--第三名-->
  <div class="body_count4">
    <div class="login_count4">
      <img src="/img/3.png" style="width: 60px; height:80px">
      <div style="margin-left: 80px;margin-top: -70px">
        <h1 style="font-size:24px;color: orange">季军</h1>
        <p id="No3" th:name="workerName"></p>
        <p id="NoCount3" th:name="sendWaterCount"></p>
      </div>
    </div>
  </div>


  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="js/login.js"></script>


  <!--3D图-->
  <div id="container2" style="height: 400px"></div>
  <script>
    var workerName = new Array();
    var sendWaterCount = new Array();
    axios({
      method:"get",
      url:"/main/mainMenu"
    }).then(function (resp){
      for (let i = 0; i < resp.data.length; i++) {
        var respElement = resp.data[i];
        workerName[i] = respElement.workerName;
        sendWaterCount[i] = respElement.sendWaterCount;
      }
      $('#No1').text('姓名：'+workerName[0])
      $('#NoCount1').text('数量：'+sendWaterCount[0])
      $('#No2').text('姓名：'+workerName[1])
      $('#NoCount2').text('数量：'+sendWaterCount[1])
      $('#No3').text('姓名：'+workerName[2])
      $('#NoCount3').text('数量：'+sendWaterCount[2])


      var chart = Highcharts.chart('container2', {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45
          }
        },
        title: {
          text: '不同送水工送水数量对比'
        },
        subtitle: {
          text: '送水工的3D环形图'
        },
        plotOptions: {
          pie: {
            innerSize: 100,
            depth: 45
          }
        },
        series: [{
          name: '送水数量',
          data: [
            [workerName[0], sendWaterCount[0]],
            [workerName[1], sendWaterCount[1]],
            [workerName[2], sendWaterCount[2]],
            [workerName[3], sendWaterCount[3]],
            [workerName[4], sendWaterCount[4]],
            [workerName[5], sendWaterCount[5]],
            [workerName[6], sendWaterCount[6]],
            [workerName[7], sendWaterCount[7]],
            [workerName[8], sendWaterCount[8]],
            [workerName[9], sendWaterCount[9]],
            [workerName[10], sendWaterCount[10]],
            [workerName[11], sendWaterCount[11]]
          ]
        }]
      });
    })
  </script>



  <!--柱状图-->
  <div id="container"></div>
  <div id="wrapper">
    <button id="plain" class="btn btn-success">普通</button>
    <button id="inverted" class="btn btn-danger">反转</button>
    <button id="polar" class="btn btn-warning">极地图</button>
  </div>
  <script>
    var workerName = new Array();
    var sendWaterCount = new Array();
    axios({
      method:"get",
      url:"/main/mainMenu"
    }).then(function (resp){
      console.log(JSON.stringify(resp.data))
      for (let i = 0; i < resp.data.length; i++) {
        var respElement = resp.data[i];
        workerName[i] = respElement.workerName;
        sendWaterCount[i] = respElement.sendWaterCount;
    }

      var chart = Highcharts.chart('container', {
        title: {
          text: '送水排行榜'
        },
        subtitle: {
          text: '普通的'
        },
        xAxis: {
          categories: workerName
        },
        series: [{
          type: 'column',
          colorByPoint: true,
          data: sendWaterCount,
          showInLegend: false
        }]
      });

      // 给 wrapper 添加点击事件
      Highcharts.addEvent(document.getElementById('wrapper'), 'click', function(e) {
        var target = e.target,
                button = null;
        if(target.tagName === 'BUTTON') { // 判断点的是否是 button
          button = target.id;
          switch(button) {
            case 'plain':
              chart.update({
                chart: {
                  inverted: false,
                  polar: false
                },
                subtitle: {
                  text: '普通的'
                }
              });
              break;
            case 'inverted':
              chart.update({
                chart: {
                  inverted: true,
                  polar: false
                },
                subtitle: {
                  text: '反转'
                }
              });
              break;
            case 'polar':
              chart.update({
                chart: {
                  inverted: false,
                  polar: true
                },
                subtitle: {
                  text: '极地图'
                }
              });
              break;
          }
        }
      });

    })

  </script>

</div>

</body>
</html>